<template>
   <div 
            class="my-swiper">
            <div class = 'wait' v-if = 'iswait'>
                <waiting></waiting>
            </div>
            <!-- 图片 -->
            <div class="my-swiper-container" v-if="!iswait">
                <ul
                    v-on:transitionend="end"
                    v-bind:style="'transition:'+(isTransition == true?v1:v0)+';transform:translateX('+v2+'px)'"
                    >
                    <li 
                        v-for="item in swiperList"
                        v-bind:key="item.id">
                        <router-link :to = '{path:"/mdetail",query:{id:item.movieId,cityname:cityName,cityid:cityId}}'>
                        <div>
                            <img 
                                v-bind:src="item.poster"
                                alt="item.movieId">
                        </div>
                        </router-link>
                    </li>

                    <!-- 追加多一张图片 -->
                    <li>
                        <router-link :to = '{path:"/mdetail",query:{id:swiperList[0].movieId}}'>
                        <div>
                            <img 
                                v-bind:src="swiperList[0].poster"
                                alt="swiperList[0].movieId">
                        </div>
                        </router-link>
                    </li>
                </ul>
            </div>
            <!-- 导航点 -->
            <div class="my-swiper-propagation" v-if="!iswait">
                <ol>
                    <li 
                        v-for="(item , index) in swiperList"
                        v-bind:key="item.id"
                        v-bind:class="{active:index == square}"
                        >
                    </li>
                </ol>
            </div>
        </div>
</template>
<script>
import waiting from '@/components/waiting.vue';
export default {
    props:{
        movieTop:{
            type : Array,
        },
        cityName:{

        },
        cityId:{

        }
    },
     data(){
                return {
                    v0:"none",
                    v1:"transform .5s",
                    v2:"0",
                    index: 0,  
                    square: 0, 
                    width: 320,
                    timer: null, 
                    isTransition: true ,
                    swiperList: [
                            {"poster":"http://p0.meituan.net/480.960/movie/dcc0411b145d4336a7f67e650d17964e1846717.jpg","movieId":"1413641"},
                            {"poster":"http://p1.meituan.net/480.960/movie/b6d19aa5041bd972e74a176d56b3a5384478764.jpg","movieId":"1427538"},
                            {"poster":"http://p0.meituan.net/480.960/movie/addf7c8023c01237d1ab701aab2b31b82798672.jpg","movieId":"1414385"},
                    ],
                    iswait : true,
            }
     },
            methods: {
                end(){
                    if(this.index > this.swiperList.length - 1 ){
                        this.index = 0; 
                        this.v2 = 0;
                        this.isTransition = false;
                    }   
                },
                autoPlay(){
                    
                    this.isTransition = true;
                    this.index ++;
                    this.v2 = -(this.index * this.width);
                    this.square ++;
                    this.square = this.square > this.swiperList.length - 1 ? 0 : this.square;
                },
                // addMouseEneter(){
                //     clearInterval(this.timer);
                // },
                // addMouseLeave(){
                //     clearInterval(this.timer);
                //     this.timer = setInterval(()=>{
                //         this.autoPlay();
                //     },1500)
                // },
                // addClickEvent(i){
                //     clearInterval(this.timer);
                //     this.index = i;
                //     this.square = i;
                //     this.v2 = -(this.index * this.width);
                //     this.timer = setInterval(()=>{
                //         this.autoPlay();
                //     },1500)
                // }
            },
            mounted(){
                axios.get('https://apis.netstart.cn/maoyan/index/topRatedMovies')
                    .then(
                        data=> {
                            if(data.status == 200){
                                this.swiperList = data.data.movieList.slice(0,3)
                                this.swiperList.forEach(element => {
                                    element.poster = element.poster.replace('170.230',"480.960");
                                });
                                // console.log(this.swiperList)
                                this.iswait = false;
                            }
                        }
                    )
                // console.log(window.innerWidth)
                this.width = window.innerWidth
                this.timer = setInterval(()=>{
                    this.autoPlay();
                },2000)
                window.onresize = function () {
                    // console.log(111)
                    location.reload();
                }
            },
            components:{
            waiting,
            },
}
</script>

<style lang = 'scss' scoped>
img {
    vertical-align: middle;
}
.my-swiper {
    width: 100%;
    max-width: 600px;
    min-width: 300px;
    margin: 0px auto;
    position: relative;
}
.wait{
            height : 200px;
            text-align : center;
            line-height : 200px;
            color : grey;
            font-size: 16px;
}
.my-swiper-container {
    width: 100%;
    overflow: hidden;
    ul {
        width: 1000%;
        transform: translateX(0);
        transition: transform .5s;
        li {
            width: 10%;
            float: left;
            div {
                display: block;
                width: 100%;
                height: 200px;
                overflow-y:hidden;
                img {
                    width: 100%;
                    height:200%;
                    margin-top:-200px;
                }
            }
        }
        &:after {
            content: "";
            display: block;
            clear: both;
        }
    }
}
.my-swiper-propagation {
    width: 80px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: 0;
    ol {
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        li {
            width: 8px;
            height: 8px;
            border-radius:50%;
            border:1px solid #ccc;
            margin: 0 5px;
            cursor: pointer;
        }
        .active {
            background-color: orange;
        }
    }
}
</style>